<template>
<div id="year-actual" >
  <div class="group group1" style="padding-top: 30px;">
    <div class="title">
      上月排放总量
    </div>
    <div class="list">
      <div class="item" v-for="(item,index) in monthList" :key="index">
        <div class="name">
          <span>{{ item.name }}(吨)</span>
          <span>{{ proFormat1(item.num) }}</span>
        </div>
        <!-- <div class="wave">
          <i :class="item.datas > 0 ? 'icolor1' : 'icolor2'"></i>
          <span>
            {{ proFormat2(item.datas) }}
            <small>%</small>
          </span>
        </div> -->
      </div>
    </div>
  </div>
  <div class="group group2">
    <div class="title">
      当年排放总量
    </div>
    <div class="list">
      <div class="item" v-for="(item,index) in yearList" :key="index">
        <div class="num">
          {{ proFormat1(item.num) }}
        </div>
        <div class="name">
          {{ item.name }}(吨)
        </div>
      </div>
    </div>
  </div>
  <div class="source-composition">
    <div class="title">排放来源构成</div>
    <div class="chart-list">
      <div class="chart">
        <pie-text-list :chart="chart1" strreplace="注册车辆"></pie-text-list>
      </div>
      <!-- <div class="chart">
        <pie-text-list :chart="chart2" strreplace="运输"></pie-text-list>
      </div> -->
    </div>
  </div>
</div>
</template>

<script>
import pieTextList from '@/components/EchartsGroup/pieTextList.vue'
import {getSummaryLastMouth,getSummaryThisYear} from '@/api/largescreen/index.js'
import { mapState } from 'vuex'


export default {
  name: 'yearActual',
  components:{
    pieTextList
  },
  data(){
    return{
      monthList:[
        {
          name:'NOX',
          num: '',
          datas:'',
        },
        {
          name:'PM2.5',
          num:'',
          datas:'',
        },
        {
          name:'VOCs',
          num:'',
          datas:'',
        },
        {
          name:'SO₂',
          num:'',
          datas: '',
        },
        {
          name:'CO',
          num:'',
          datas:'',
        },
        {
          name:'总碳',
          num:'',
          datas:'',
        },
      ],
      yearList:[
        {
          name:'NOX',
          num:'',
        },
        {
          name:'PM2.5',
          num: '',
        },
        {
          name:'VOCs',
          num: '',
        },
        {
          name:'SO₂',
          num:'',
        },
        {
          name:'CO',
          num:'',
        },
        {
          name:'总碳',
          num: '',
        },
      ],
      chart1:[
        {
          name:'本地注册车辆',
          value:37,
        },
        {
          name:'外地注册车辆',
          value:63,
        }
      ],
      chart2:[
        {
          name:'市内运输',
          value:19.0,
        },
        {
          name:'本市跨省运输',
          value:41.7,
        },
        {
          name:'纯过境运输',
          value:39.3,
        }
      ],
    }
  },
  computed:{
    // ...mapState(['map']),
    adcode(){
      // return this.map.adcode
      return 120000
    }
  },
  mounted(){
  },
  methods:{
    proFormat1(number){
      return this.myfun.myformat(number)
    },
    proFormat2(num){
      if(num <= 1){
        num = Math.abs(num);
        return num.toFixed(3)
      }else {
        return num.toFixed(2)
      }
    },
    SYPFZL(id){
      //上月排放量汇总
      getSummaryLastMouth ({'cId':id})
      .then(res=>{
        let data = res.data
        this.monthList[0].num = data.totalNox.toFixed(3);
        this.monthList[1].num = data.totalPm25.toFixed(3);
        this.monthList[2].num = data.totalVocs.toFixed(3);
        this.monthList[3].num = data.totalSo2.toFixed(3);
        this.monthList[4].num = data.totalCo.toFixed(3);
        this.monthList[5].num = data.totalTc.toFixed(3);
        this.monthList[0].datas = data.noxRatio;
        this.monthList[1].datas = data.pm25Ratio;
        this.monthList[2].datas = data.vocsRatio;
        this.monthList[3].datas = data.so2Ratio;
        this.monthList[4].datas = data.coRatio;
        this.monthList[5].datas = data.tcRatio;
      })
      .catch(err =>{
        console.log(err)
      })
    },
    DNPFZL(id){
      //当年排放量汇总（吨）
      getSummaryThisYear ({'cId':id})
        .then(res=>{
          let data = res.data
          this.yearList[0].num = data.totalNox.toFixed(3);
          this.yearList[1].num = data.totalPm25.toFixed(3);
          this.yearList[2].num = data.totalVocs.toFixed(3);
          this.yearList[3].num = data.totalSo2.toFixed(3);
          this.yearList[4].num = data.totalCo.toFixed(3);
          this.yearList[5].num = data.totalTc.toFixed(3);
        })
        .catch(err =>{
          console.log(err)
        })
    }
  },
  watch:{
    adcode:{
      immediate:true,
      deep:true,
      handler(newValue,oldValue){
        if(newValue == '120000'){
          let id = null;
          this.SYPFZL(id)
          this.DNPFZL(id)

        }else {
          this.SYPFZL(newValue)
          this.DNPFZL(newValue)
        }
      }
    }
  },
}
</script>

<style scoped lang="scss">
#year-actual{
  width: 572px;
  height: 100%;
  margin: 0px auto;
  box-sizing: border-box;
  // padding-top: 23px;
  .group{
    width: 100%;
    margin-bottom: 30px;
    .title{
      width: 100%;
      font-size: 22px;
      color: #effafb;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 20px;
    }
  }
  .group1{
    .list{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item{
        width: 268px;
        height: 74px;
        box-sizing: border-box;
        margin-right: 30px;
        margin-bottom: 24px;
        background-size: contain;
        padding-left: 95px;
        display: flex;
        align-items: center;
        .name{
          width: 60%;
          height: 100%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          span{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
            &:nth-child(1){
              font-size: 13px;
              margin-bottom: 5px;
            }
            &:nth-child(2){
              font-size: 22px;
              color: #f0f6fb;
            }
          }
        }
        .wave{
          width: 40%;
          height: 100%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          i{
            display: block;
            width: 0px;height: 0px;
            margin-bottom: 7px;
            margin-left: 2px;
            border-style:solid;
            border-color:transparent;
            border-width: 5px;
          }
          .icolor1{
            border-bottom-color:#ff6a30;
            border-bottom-width: 10px;
          }
          .icolor2{
            border-top-color:#00ffff;
            border-top-width: 10px;
          }
          span{
            font-size: 20px;
            color: #0d84c1;
            small{
              font-size: 14px;
              color: #0d84c1;
            }
          }
        }
        &:nth-child(even){
          margin-right: 0px;
        }
        &:nth-last-child(1),
        &:nth-last-child(2){
          margin-bottom: 0px;
        }
        &:nth-child(1){
          background: url("~@/assets/image/month-nox.png") no-repeat left center;
          .name{
            span{
              &:nth-child(1){
                color: #11a2f3;
              }
            }
          }
        }
        &:nth-child(2){
          background: url("~@/assets/image/month-pm.png") no-repeat left center;
          .name{
            span{
              &:nth-child(1){
                color: #ff9102;
              }
            }
          }

        }
        &:nth-child(3){
          background: url("~@/assets/image/month-vocs.png") no-repeat left center;
          .name{
            span{
              &:nth-child(1){
                color: #0439ca;
              }
            }
          }

        }
        &:nth-child(4){
          background: url("~@/assets/image/month-so2.png") no-repeat left center;
          .name{
            span{
              &:nth-child(1){
                color: #9d1fdf;
              }
            }
          }

        }
        &:nth-child(5){
          background: url("~@/assets/image/month-co2.png") no-repeat left center;
          .name{
            span{
              &:nth-child(1){
                color: #09e5d0;
              }
            }
          }

        }
        &:nth-child(6){
          background: url("~@/assets/image/month-all.png") no-repeat left center;
          .name{
            span{
              &:nth-child(1){
                color: #07ecf4;
              }
            }
          }

        }

      }
    }
  }
  .group2{
    .list{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item{
        width: 172px;
        height: 104px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 0px 11px 6px 11px;
        text-align: center;
        margin-bottom: 21px;
        margin-right: 28px;
        .num{
          width: 100%;
          font-size: 22px;
          color: #f0f6fb;
          margin-bottom: 15px;
        }
        .name{
          width: 100%;
          height: 30px;
          font-size: 14px;
          line-height: 30px;
          color: #f0f6fb;
          border-radius: 2px;
          overflow: hidden;
        }

        &:nth-child(3n){
          margin-right: 0px;
        }

        &:nth-last-child(1),
        &:nth-last-child(2),
        &:nth-last-child(3){
          margin-bottom: 0px;
        }

        &:nth-child(1){
          background: url("~@/assets/image/year-nox.png") no-repeat left center;
          .name{
            background-image: linear-gradient(115deg, #40b0f1b3 0%, #07e7f3b3 100%);
          }
        }
        &:nth-child(2){
          background: url("~@/assets/image/year-pm.png") no-repeat left center;
          .name{
            background-image: linear-gradient(115deg,#ff9102b3 0%, #ffa701b3 50%, #ffba00b3 100%);
          }

        }
        &:nth-child(3){
          background: url("~@/assets/image/year-vocs.png") no-repeat left center;
          .name{
            background-image: linear-gradient(115deg,#0439cab3 0%, #07ebf2b3 100%);
          }

        }
        &:nth-child(4){
          background: url("~@/assets/image/year-so2.png") no-repeat left center;
          .name{
            background-image: linear-gradient(115deg,#6018d7b3 0%, #9d1fdfb3 100%);
          }

        }
        &:nth-child(5){
          background: url("~@/assets/image/year-co2.png") no-repeat left center;
          .name{
            background-image: linear-gradient(115deg, #07e7f2b3 0%, #09e5d0b3 47%, #0be2adb3 100%);
          }

        }
        &:nth-child(6){
          background: url("~@/assets/image/year-all.png") no-repeat left center;
          .name{
            background-image: linear-gradient(115deg, #0439cab3 0%, #07ecf4b3 100%);
          }

        }
      }
    }
  }
  .source-composition{
    width: 100%;
    height: 230px;
    .title{
      width: 100%;
      font-size: 18px;
      line-height: 20px;
      color: #c4ced7;
      margin-bottom: 6px;
    }

    .chart-list{
      width: 100%;height: calc(100% - 26px);
      display: flex;

      .chart{
        width: 100%;
        height: 100%;
        padding: 0px 6px;
      }
    }
  }
}
</style>
